<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>师生商城</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/iconfont/iconfont.css">
    <link rel="stylesheet" href="../css/college.css">
</head>
<body>
    <header class="clearfix">
        <div class="container clearfix">
            <div class="logo fl">
                <a href="#"><img src="../images/logo.png" alt=""></a>
            </div>
            <div class="nav-select fl">
                <div class="select-input ">师生商城</div>
                <span class="line hide"></span>
                <ul class="hide">
                    <li ><a href="index.html">首页</a></li>
                    <li ><a href="college.html">网院</a></li>
                    <li class="active"><a href="find-course.html">找课程</a></li>
                    <li><a href="inquiry.html">专家问诊</a></li>
                    <li><a href="free-course.html">免费课程</a></li>
                    <li><a href="goods-list.html">师生商城</a></li>
                    <li ><a href="bbs.html">找论坛</a></li>
                    <li ><a href="find-teacher.html">找老师</a></li>
                </ul>
            </div>
            <div class="fr">
                <div class="search fl">
                    <div class="dropdown fl">
                        <select name="" id="">
                            <option value="">课程</option>
                            <option value="">老师</option>
                        </select>
                    </div>
                    <div class="search-box fl">
                        <input type="text">
                        <i class="iconfont">&#xe641;</i>
                    </div>
                </div>
                <div class="fl header-nav">
                    <ul>
                        <li><a href="#">个人中心</a></li>
                        <li><a href="#">我的订单</a></li>
                        <li><a href="#">我的课表</a></li>
                        <li><a href="#">我的收藏</a></li>
                        <li><a href="#"><i class="iconfont">&#xe62e;</i></a></li>
                        <li><a href="#">退出</a></li>
                    </ul>
                </div>
            </div>
        </div> 
    </header>
    <div class="banner">
        <img src="../images/banner7.jpg" alt="" />
    </div>
    <div class="main clearfix no-shadow">
        <div class="container clearfix">
            <!-- 选择年级科目 -->
            <div class="select-type mart20">
                <div class="select-grade clearfix">
                    <p class="fl type-label">学习用品</p>
                    <ul class="fl">
                        <li class="active">全部</li>
                        <li>笔记本</li>
                        <li>笔</li>
                        <li>书包</li>
                        <li>三角板</li>
                        <li>计算器</li>
                        <li>粉笔</li>
                        <li>胶条</li>
                        <li>圆规</li>
                        <li>墨水</li>
                        <li>作文纸</li>
                        <li>其他</li>
                    </ul>
                </div>
                <div class="select-subject clearfix">
                    <p class="fl type-label">电子设备</p>
                    <ul class="fl">
                        <li class="active">全部</li>
                        <li>摄像头</li>
                        <li>电脑</li>
                        <li>麦克风</li>
                        <li>写字板</li>
                        <li>其他</li>
                    </ul>
                </div>
                <div class="select-subject clearfix">
                    <p class="fl type-label">学习资料</p>
                    <ul class="fl">
                        <li class="active">全部</li>
                        <li>参考书</li>
                        <li>字帖</li>
                        <li>工具书</li>
                        <li>三角板</li>
                        <li>其他</li>
                    </ul>
                </div>
                <div class="select-subject clearfix">
                    <p class="fl type-label">其他</p>
                    <ul class="fl">
                        <li class="active">全部</li>
                        <li>舞会面具</li>
                    </ul>
                </div>
            </div>
            <div class="mall-tab mart20 clearfix">
                <div class="fr ">
                    <h5 class="fl">积分商城</h5>
                    <ul class="fl">
                        <li class="active">销量</li>
                        <li>积分</li>
                        <li>更多</li>
                    </ul>
                </div>
            </div>
            <div class="goods-list mart30">
                <ul class="clearfix">
                    <li>
                        <a href="##">
                            <img src="../images/xingxing.png"  />
                            <i>星星</i>
                            <p>积分：<span class="red-color">1</span></p>
                            <div class="btn buy-btn marb30">
                                <button class="button">兑换</button>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="##">
                            <img src="../images/xingxing.png"  />
                            <i>星星</i>
                            <p>积分：<span class="red-color">1</span></p>
                            <div class="btn buy-btn marb30">
                                <button class="button">兑换</button>
                            </div>
                        </a>
                    </li>
                    <li >
                        <a href="##">
                            <img src="../images/xingxing.png"  />
                            <i>星星</i>
                            <p>积分：<span class="red-color">1</span></p>
                            <div class="btn buy-btn marb30">
                                <button class="button">兑换</button>
                            </div>
                        </a>
                    </li>
                    <li >
                        <a href="##">
                            <img src="../images/xingxing.png"  />
                            <i>星星</i>
                            <p>积分：<span class="red-color">1</span></p>
                            <div class="btn buy-btn marb30">
                                <button class="button">兑换</button>
                            </div>
                        </a>
                    </li>
                    <li class="no-mar">
                        <a href="##">
                            <img src="../images/xingxing.png"  />
                            <i>星星</i>
                            <p>积分：<span class="red-color">1</span></p>
                            <div class="btn buy-btn marb30">
                                <button class="button">兑换</button>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="##">
                            <img src="../images/xingxing.png"  />
                            <i>星星</i>
                            <p>积分：<span class="red-color">1</span></p>
                            <div class="btn buy-btn marb30">
                                <button class="button">兑换</button>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="##">
                            <img src="../images/xingxing.png"  />
                            <i>星星</i>
                            <p>积分：<span class="red-color">1</span></p>
                            <div class="btn buy-btn marb30">
                                <button class="button">兑换</button>
                            </div>
                        </a>
                    </li>
                    <li >
                        <a href="##">
                            <img src="../images/xingxing.png"  />
                            <i>星星</i>
                            <p>积分：<span class="red-color">1</span></p>
                            <div class="btn buy-btn marb30">
                                <button class="button">兑换</button>
                            </div>
                        </a>
                    </li>
                    <li >
                        <a href="##">
                            <img src="../images/xingxing.png"  />
                            <i>星星</i>
                            <p>积分：<span class="red-color">1</span></p>
                            <div class="btn buy-btn marb30">
                                <button class="button">兑换</button>
                            </div>
                        </a>
                    </li>
                    <li class="no-mar">
                        <a href="##">
                            <img src="../images/xingxing.png"  />
                            <i>星星</i>
                            <p>积分：<span class="red-color">1</span></p>
                            <div class="btn buy-btn marb30">
                                <button class="button">兑换</button>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
            <!-- 分页 -->
            <div class="page mart30">
                <ul>
                    <li class="prev"><i class="iconfont">&#xe60a;</i>PREV</li>
                    <li>1</li>
                    <li>2</li>
                    <li class="active">3</li>
                    <li class="next">NEXT<i class="iconfont">&#xe60b;</i></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="introduce">
        <div class="container">
            <div class="top clearfix">
                <div class="logo fl"><a href="#"><img src="../images/logo.png" alt=""></a></div>
                <div class="fl download">
                    <img src="../images/erweima.png" alt="">
                    <p>客户端下载</p>
                </div>
                <div class="fl download">
                    <img src="../images/erweima.png" alt="">
                    <p>微信公众号</p>
                </div>
                <div class="fl contact">
                    <p><i class="iconfont">&#xe618;</i>020-32146993</p>
                    <p><i class="iconfont">&#xe61b;</i>4903 Deangel Row Suite 838</p>
                    <p><i class="iconfont">&#xe639;</i>support@company.com</p>
                </div>
            </div>
            <div class="contact-ul clearfix">
                <ul>
                    <li><a href="#">关于我们</a></li>
                    <li><a href="#">人才招聘</a></li>
                    <li><a href="#">服务协议</a></li>
                </ul>
            </div>
            <div class="footline">
                <img src="../images/footer_end.png" alt="">
            </div>
        </div>
    </div>
    <footer>
        <p>广州市家合教育科技有限公司</p>
        <p>地址：广州市增城大道69号万达广场金街9栋201-204 粤ICP备16098091号</p>
    </footer>
</body>
</html>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/conn.js"></script>
<script type="text/javascript">
    //tab切换
    $('.mall-tab,.select-type').on('click','li',function(){
        var $this = $(this);
        $this.addClass('active').siblings().removeClass('active');
    });
    
</script>